<template>
  <!--下拉选择-->
  <div class="dict-select-box">
    <div class="dict-select-title">
      <p v-text="title"></p>
    </div>
    <div class="dict-select" ref="dictSelect">
      <input @click="readOnly ? null : selectClick()" v-model="label" type="text" class="select" ref="select"
        :placeholder="placeholder_def" :disabled="readOnly" readonly>
      <div class="option" ref="myOption">
        <div v-if="search" class="dict-text-box">
          <div class="dict-text">
            <input type="text" v-model="searchKeyWord" autocomplete="off" placeholder="请输入关键字">
          </div>
        </div>
        <ul v-if="empty" style="width:calc(100% - 25px);padding-left: 10px">
          <span style="display: inline-block;color: rgba(255, 255, 255, 0.2); width: 100%;text-align: center">
            暂无数据
          </span>
        </ul>
        <ul v-else class="select-option">
          <div v-for="(item, index) in selectDicTemp" :key="index">
            <li v-if="item.disable && item.disable == '1'" class="option-li-disable" v-text="item.label">
            </li>
            <li v-else @click="optionLiClick(index, item)"
              :class="[currentClickNode == index ? 'currentNodeBC' : '', 'option-li']" v-text="item.label">
            </li>
          </div>
        </ul>
      </div>
      <div v-if="!readOnly" class="select-control" ref="control">
        <span class="control01">
          <svg-icon icon-class="arrow-down" />
          <!-- ☑ -->
        </span>
        <span class="control02" @click="clear()">
          <svg-icon icon-class="content-clear" />
          <!-- × -->
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => null
    },
    title: {
      type: String,
      default: () => {
        return "下拉选择"
      }
    },
    placeholder: {
      type: String
    },
    selectDic: [],
    search: {
      type: Boolean,
      default: () => false,
    },
    readOnly: {
      type: Boolean,
      default: () => false
    },
  },
  data() {
    return {
      dropOpen: true,
      placeholder_def: this.placeholder == null ? "请选择" + this.title : this.placeholder,
      searchKeyWord: null,
      selectDicTemp: null,
      label: null,
      empty: false,
      currentClickNode: -1,
    }
  },
  watch: {
    selectDic(newData, oldData) {
      this.selectDicTemp = JSON.parse(JSON.stringify(this.selectDic))
      this.initValue(this.selectDicTemp)
      this.isEmpty()
    },
    value(newData, oldData) {
      this.selectDicTemp = JSON.parse(JSON.stringify(this.selectDic))
      this.initValue(this.selectDicTemp)
      this.isEmpty()
    },
    searchKeyWord(newData, oldData) {
      this.selectDicTemp = JSON.parse(JSON.stringify(this.selectDic))
      if (newData.length > 0) {
        this.searchDict(this.selectDicTemp, newData)
      } else {
        this.selectDicTemp = JSON.parse(JSON.stringify(this.selectDic))
      }
      this.isEmpty()
    }
  },
  mounted() {
    this.selectDicTemp = JSON.parse(JSON.stringify(this.selectDic))
    this.initValue(this.selectDicTemp)
    this.isEmpty()
    addEventListener('mousedown', (e) => {
      // 监听组件以外的点击事件
      const path = e.path || (e.composedPath && e.composedPath());
      if (!path.includes(this.$refs.myOption) && !path.includes(this.$refs.select)) {
        if (!this.dropOpen) {
          this.optSelect(false)
          this.dropOpen = !this.dropOpen
        }
      }
    })
  },
  methods: {
    initValue(selectDic) {
      for (let i = 0; i < selectDic.length; i++) {
        if (selectDic[i].value == this.value) {
          this.label = selectDic[i].label
          break;
        }
        this.label = null
      }
    },
    optSelect() {
      if (this.dropOpen) {
        this.$refs.control.style.transform = "rotate(-180deg)"
        this.$refs.myOption.style.maxHeight = "200px"
        this.$refs.myOption.style.transform = "scaleY(1) scale(1)"
        this.$refs.dictSelect.style.border = "1px solid #39404d"
      } else {
        this.$refs.control.style.transform = "rotate(0deg)"
        this.$refs.myOption.style.maxHeight = "0px"
        this.$refs.myOption.style.transform = "scaleY(0) scale(0.5)"
        this.$refs.dictSelect.style.border = "1px solid #2b313e"
      }
    },
    selectClick() {
      if (this.dropOpen) {
        this.optSelect(true)
      } else {
        this.optSelect(false)
      }
      this.dropOpen = !this.dropOpen
    },
    clear() {
      if (!this.dropOpen) {
        this.optSelect(false)
        this.dropOpen = !this.dropOpen
      }
      this.label = null
      this.$emit("input", null);
      this.currentClickNode = -1
    },
    optionLiClick(index, item) {
      this.currentClickNode = index
      this.label = item.label
      this.$emit("input", item.value);
      // 选择后弹出框消失
      this.optSelect(false)
      this.dropOpen = !this.dropOpen
    },
    searchDict(selectDic, keyWords) {
      let rmIndex = []
      for (let i = 0; i < selectDic.length; i++) {
        if (selectDic[i].label.indexOf(keyWords) === -1) {
          rmIndex.push(i)
        }
      }
      // 清除不符合要求的对象
      for (let i = rmIndex.length - 1; i >= 0; i--) {
        selectDic.splice(rmIndex[i], 1)
      }
    },

    /* 是否为空 */
    isEmpty() {
      if (this.selectDicTemp.length === 0) {
        this.empty = true
      } else {
        this.empty = false
      }
    },
  }
}
</script>

<style scoped>
input,
input:focus {
  background: none;
  outline: none;
  border: none;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dict-select-box {
  width: 100%;
  height: 30px;
  margin: 15px auto;
}

.dict-select-title {
  cursor: default;
  float: left;
  width: 20%;
  height: 100%;
  line-height: 30px;
  font-size: 14px;
  letter-spacing: 1.5px;
}

.dict-select-title p {
  width: 100%;
  margin: 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.dict-select {
  cursor: default;
  float: left;
  position: relative;
  width: 73%;
  height: 25px;
  margin-top: 1.5px;
  border: 1px solid #2b313e;
  border-radius: 3px;
  background-color: #222833;
  /*背景颜色*/
  transition: 0.3s;
}

.select {
  cursor: default;
  width: 80%;
  height: 23px;
  background-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  /* 文字溢出处理 */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.select::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.dict-text-box {
  display: block;
  width: calc(100% - 32px);
  height: 20px;
  margin: 4px 0;
  margin-left: 10px;
}

.dict-text {
  float: left;
  width: 100%;
  margin: 0px auto;
}

.dict-text input {
  border: 1px solid #2b313e;
  border-radius: 3px;
  width: 100%;
  height: 20px;
  padding-left: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  background-color: transparent;
  transition: 0.3s;
}

.dict-text input:focus {
  border: 1px solid #39404d;
}

.dict-text input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: lighter;
}

.option {
  margin-top: 5px;
  width: 100%;
  max-height: 0;
  border: 1px solid #2b313e;
  background-color: #222833;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: absolute;
  top: 25px;
  transform: scaleY(0) scale(0.5);
  transition: 0.25s;
  z-index: 999;
}

.option ul {
  padding: 5px 8px;
  font-size: 12px;
}

.option-li-disable {
  cursor: not-allowed;
  padding: 5px 5px;
  color: rgba(255, 255, 255, 0.2);
  text-align: left;
  border-radius: 3px;
  min-height: 15px;
  transition: 0.1s;
}

.option-li {
  cursor: pointer;
  padding: 5px 5px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  border-radius: 3px;
  min-height: 15px;
  transition: 0.1s;
}

.currentNodeBC {
  background-color: #252b38
}

.option ul li:hover {
  background-color: #252b38 !important;
}

.option ul li:active {
  background-color: #272d3a;
}

.control02 {
  display: none;
}

.select-control {
  user-select: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 3px;
  right: 10px;
  transition: 0.3s;
}

.select-control:hover .control01 {
  display: none;
  color: rgba(255, 255, 255, 0.5);
}

.select-control:hover .control02 {
  display: block;
  color: rgba(255, 255, 255, 0.5);
}

.select-control:active .control02 {
  color: rgba(255, 255, 255, 0.6);
}

.select-option {
  width: calc(100% - 18px);
  max-height: 150px;
  overflow-y: scroll;
}

/*整个滚动条*/
.select-option::-webkit-scrollbar {
  width: 3px;
  height: 0px;
}

/*滑块*/
.select-option::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.11);
}

/*滑块的轨道*/
.select-option::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
}</style>
